<template>
  <div class="reg-step2-box">
    <div class="title-info">确认挂号信息</div>
    <el-card class="top-card-box">
      <template #header>
        <div class="top-card-header">
          <span>请选择就诊人</span>
          <el-button icon="User" type="primary" @click="add"
            >添加就诊人</el-button
          >
        </div>
      </template>
      <div class="all-top-center-box">
        <el-card
          class="top-center-box"
          v-for="(item, index) in userInfo"
          :key="item.id"
          @click="getSureUser(index)"
        >
          <template #header>
            <div class="top-center-header">
              <div class="header-type-name">
                <span class="head-type">{{
                  item.isInsure == 1 ? "医保" : "自费"
                }}</span>
                <span class="head-name">{{ item.name }}</span>
              </div>
              <el-button
                type="primary"
                icon="Edit"
                circle
                @click.stop="edit(item.id)"
              />
            </div>
          </template>
          <div class="user-info-item">
            <div>证件类型：{{ item.param.certificatesTypeString }}</div>
            <div>证件号码：{{ item.certificatesNo }}</div>
            <div>用户性别：{{ item.sex == 0 ? "女生" : "男生" }}</div>
            <div>出生日期：{{ item.birthdate }}</div>
            <div>手机号码：{{ item.phone }}</div>
            <div>婚姻状况：{{ item.isMarry == 1 ? "已婚" : "未婚" }}</div>
            <div>当前住址：{{ item.param.cityString }}</div>
            <div>详细住址：{{ item.paramfullAddress }}</div>
          </div>
          <!-- 已选择的红盒子 -->
          <div class="confirm-box" v-if="currentIndex == index">已选择</div>
        </el-card>
      </div>
    </el-card>
    <el-card class="bottom-card-box">
      <template #header>
        <div class="bottom-card-header">
          <span>挂号信息</span>
        </div>
      </template>
      <table class="bottom-center-table">
        <tr>
          <td>就诊日期：</td>
          <td class="two-td">{{ docInfo.workDate }}</td>
          <td>就诊医院：</td>
          <td>{{ docInfo.param ? docInfo.param.hosname : "" }}</td>
        </tr>
        <tr>
          <td>就诊科室：</td>
          <td class="two-td">
            {{ docInfo.param ? docInfo.param.depname : "" }}
          </td>
          <td>医生姓名：</td>
          <td>{{ docInfo.docname }}</td>
        </tr>
        <tr>
          <td>医生职称：</td>
          <td class="two-td">{{ docInfo.title }}</td>
          <td>医生专长：</td>
          <td>{{ docInfo.skill }}</td>
        </tr>
        <tr class="last-tr">
          <td>医生服务费：</td>
          <td class="two-td money-td" colspan="3">{{ docInfo.amount }}</td>
          <!-- <td class="last-three-td"></td> -->
          <!-- <td></td> -->
        </tr>
      </table>
    </el-card>
    <div class="sure-reg-btn">
      <el-button
        type="primary"
        @click="submitOrder"
        :disabled="currentIndex == -1 ? true : false"
        >确定挂号</el-button
      >
    </div>
  </div>
</template>

<script>
import { reqDoctorInfo, reqGetUser } from "@/api/HospitalPage";
import { reqSubmitOrder } from "@/api/UserPage";
export default {
  name: "register_step2",
  data() {
    return {
      docInfo: {},
      docId: this.$route.query.docId,
      userInfo: [],
      currentIndex: -1,
      patientId: "",
      scheduleId: "",
      hoscode: "",
    };
  },
  methods: {
    async getDoctorInfo() {
      let result = await reqDoctorInfo(this.docId);
      if (result.code == 200) {
        this.docInfo = result.data;
        this.scheduleId = result.data.id;
        this.hoscode = result.data.hoscode;
      }
    },
    async getUser() {
      let result = await reqGetUser();
      if (result.code == 200) {
        this.userInfo = result.data;
      }
    },
    getSureUser(index) {
      this.currentIndex = index;
      this.patientId = this.userInfo[index].id;
    },
    async submitOrder() {
      let result = await reqSubmitOrder(
        this.hoscode,
        this.scheduleId,
        this.patientId
      );
      if (result.code == 200) {
        this.$router.push({
          path: "/user/orderPage",
          query: { orderId: result.data },
        });
      }
    },
    edit(id) {
      this.$router.push({
        path: "/user/patientPage",
        query: { type: "edit", id: id },
      });
    },
    add() {
      this.$router.push({ path: "/user/patientPage", query: { type: "add" } });
    },
  },
  mounted() {
    this.getDoctorInfo();
    this.getUser();
  },
};
</script>

<style lang="scss" scoped>
.reg-step2-box {
  .title-info {
    font-weight: 900;
    color: #7f7f7f;
    font-size: 20px;
    margin-bottom: 20px;
  }
  .top-card-box {
    .top-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .all-top-center-box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .top-center-box {
        width: 32%;
        margin-bottom: 10px;
        margin-right: 10px;
        position: relative;
        .top-center-header {
          display: flex;
          justify-content: space-around;
          align-items: center;
          .header-type-name {
            .head-type {
              padding: 2px;
              background-color: #f1f1f1;
              border-radius: 6px;
              margin-right: 3px;
              color: black;
              font-size: 12px;
            }
            .head-name {
              color: #7f7f7f;
            }
          }
        }
        .user-info-item {
          padding-left: 30px;
          box-sizing: border-box;
          div {
            height: 35px;
          }
        }
        .confirm-box {
          position: absolute;
          top: 110px;
          left: 60px;
          width: 200px;
          text-align: center;
          line-height: 200px;
          height: 200px;
          transform: rotate(35deg);
          border-radius: 50% 50%;
          border: 1px dashed red;
          color: rgba(255, 0, 0, 0.5);
          font-weight: 900;
        }
      }
    }
  }
  .bottom-card-box {
    margin-top: 20px;
    .bottom-center-table {
      border-collapse: collapse;
      border: 1px solid #e2e1e1;
      width: 100%;
      tr {
        td {
          border: 1px solid #e2e1e1;
          padding: 14px;
          font-size: 14px;
        }
        td:nth-child(2n + 1) {
          background-color: #f5f7fa;
          font-weight: 900;
          color: #606266;
          width: 150px;
        }
        td.two-td {
          width: 200px;
        }
        td.money-td {
          color: red;
        }
        &.last-tr {
          .last-three-td {
            background-color: #fff;
          }
        }
      }
    }
  }
  .sure-reg-btn {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
